<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国风景之美</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">中国风景之美</div>
            <div class="nav-links">
                <a href="#home">首页</a>
                <a href="#gallery">风景画廊</a>
                <a href="#map">地图导览</a>
                <a href="#about">关于我们</a>
            </div>
            <div class="search-container">
                <input type="text" placeholder="搜索景点..." id="searchInput">
                <button type="button"><i class="fas fa-search"></i></button>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero-section">
            <div class="parallax-container">
                <h1 class="main-title">探索中国之美</h1>
                <p class="subtitle">领略壮美山河，感受华夏文明</p>
            </div>
        </section>

        <section class="carousel-section">
            <div class="carousel-container">
                <div class="carousel-track">
                    <div class="carousel-slide">
                        <img src="images/huangshan.jpg" alt="黄山">
                        <div class="slide-content">
                            <h2>黄山</h2>
                            <p>黄山以奇松、怪石、云海、温泉"四绝"著称</p>
                        </div>
                    </div>
                    <div class="carousel-slide">
                        <img src="images/greatwall.png" alt="西湖">
                        <div class="slide-content">
                            <h2>西湖</h2>
                            <p>西湖十景，移步换景</p>
                        </div>
                    </div>
                    <div class="carousel-slide">
                        <img src="images/greatwall.png" alt="长城">
                        <div class="slide-content">
                            <h2>长城</h2>
                            <p>万里长城，气势磅礴</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-button prev">&#10094;</button>
                <button class="carousel-button next">&#10095;</button>
                <div class="carousel-dots"></div>
            </div>
        </section>

        <section id="gallery" class="gallery-section">
            <h2>风景画廊</h2>
            <div class="filters">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="mountain">山川</button>
                <button class="filter-btn" data-filter="water">江河湖海</button>
                <button class="filter-btn" data-filter="culture">人文景观</button>
            </div>
            <div class="gallery-grid" id="galleryGrid">
                <!-- 动态加载内容 -->
            </div>
        </section>

        <section id="map" class="map-section">
            <h2>地图导览</h2>
            <div id="chinaMap" class="map-container">
                <!-- 地图将通过 JavaScript 加载 -->
            </div>
        </section>

        <section id="about" class="about-section">
            <h2>关于我们</h2>
            <p>致力于展示中国最美的自然风光和人文景观，让更多人了解中国的大好河山。</p>
        </section>
    </main>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>联系我们</h3>
                <p>Email: contact@chinascape.com</p>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 中国风景之美 版权所有</p>
        </div>  
    </footer>

    <script src="js/main.js" type="module"></script>
</body>
</html> 